<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态表格</title>

</head>

<body>

</body>
</html>
<script type="text/javascript" language="javascript">
//事件绑定的方式
document.body.onload=createDiv;
var oTable;
function createDiv()
{

var oDiv=document.createElement("div");
oDiv.id="region";
//oDiv.style.width=400+"px"
//oDiv.style.height=300+"px";
oDiv.style.position="absolute";
oDiv.style.left=150+"px";
oDiv.style.top=150+"px";
oDiv.style.backgroundColor="lightblue";
document.body.appendChild(oDiv);
createTable();
}

function createTable()
{
oTable=document.createElement("table");
oTable.border="1";
oTable.bgColor="green";
//循环创建5行
  for(var i=1;i<=10;i++)
	{
		if(i==1)
		{
			var oTr=createTr(i);
			oTable.appendChild(oTr);
		}else
		{
		var oTr=createTr(i);
		oTable.appendChild(oTr);
		}
	}
	//在table加上控制行
	oTable.appendChild(createControlTr());
document.getElementById("region").appendChild(oTable);
}
//创建一行tag用于区分当前创建的行的索引
function createTr(tag)
{
	var oTr=document.createElement("tr");
	if(tag==1)
	{
	  for(var i=1;i<=10;i++)
	{
		if(i==1)
		{
		var oTh=createTh("全选");
		var oCheckbox=document.createElement("input");
	    oCheckbox.type="checkbox";
		oCheckbox.id="all";
		oCheckbox.onclick=selectAll;
	    oTh.appendChild(oCheckbox);
		oTr.appendChild(oTh);
		}else
		{
		var oTh=createTh("标题"+(i-1));
		oTr.appendChild(oTh);
		}
	}	
	}else
	{
	for(var i=1;i<=10;i++)
	{
		var oTd;
		if(i==1)
		{	
			oTd=createCheckbox();
			
		}else{
		oTd=createTd("测试"+(tag-1));
		
		}
		oTr.appendChild(oTd);
	}
	}
	return oTr;
	
}
//全选
function selectAll()
{
	var all=document.getElementById("all");
	var dels=document.getElementsByName("dels");
	for(var i=0;i<dels.length;i++)
	{
		dels[i].checked=all.checked;
	}
	
}
//创建控制行
function createControlTr()
{
	var oTr=document.createElement("tr");
	var oTd=createTd("");
	
	oTd.setAttribute("colspan",10);
	var oBtnAdd=document.createElement("button");
	oBtnAdd.innerHTML="添加行";
	oBtnAdd.onclick=addRow;
	var oBtnDel=document.createElement("button");
	oBtnDel.innerHTML="删除行";
	oBtnDel.onclick=delRow;
	oTd.appendChild(oBtnAdd);
	oTd.appendChild(oBtnDel);
	oTr.appendChild(oTd);
	return oTr;
	
}
//添加行
function addRow()
{
	var oTr=createTr(0);
	oTable.insertBefore(oTr,oTable.lastChild);
}
//删除行
function delRow()
{
	var dels=document.getElementsByName("dels");
	alert(dels.length);
	for(var i=dels.length-1;i>=0;i--)
	{
		
		if(dels[i].checked)
		{
			alert("删除标记:"+dels[i].parentNode.parentNode.tagName);
		oTable.removeChild(dels[i].parentNode.parentNode);
		
		}
	}
	
}
//创建选择列
function createCheckbox()
{
	var oTd=createTd("");
	var oCheckbox=document.createElement("input");
	oCheckbox.type="checkbox";
	oCheckbox.name="dels";
	oTd.appendChild(oCheckbox);
	return oTd;
	
}
//创建标题列
function createTh(content)
{
	var oTh=document.createElement("th");
	oTh.innerHTML=content;
	return oTh;
	
}
//创建一列
function createTd(content)
{
	var oTd=document.createElement("td");
	oTd.innerHTML=content;
	return oTd;
	
}
</script>
